// components/nav.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    list: {
      type: Array,
      value: []
    },
    active: {
      type: Number,
      value: 0
    },
    scrollLeft: 0
  },

  /**
   * 组件的初始数据
   */
  data: {
    lineObj: {
      width: 0, 
      left: 0
    },
    scrollIntoViewId: ""
  },
  ready: function() {
    // this.setLine();
    this.scrollLeft = 0
    this.offsetLeft = 20
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // onScrollEnd: function(e) {
    //   this.scrollEnd = true;
    //   setTimeout(() => {
    //     this.scrollEnd = false;
    //   }, 200);
    //   this.scrollLeft = e.detail.scrollLeft
    //   this.offsetLeft = e.currentTarget.offsetLeft
    // },
    // onScroller:function(e) {
    //   if (this.scrollEnd) {
    //     return false;
    //   }
    //   this.scrollLeft = e.detail.scrollLeft
    //   this.offsetLeft = e.currentTarget.offsetLeft
    // },
    setScrollView: function() {
      const prev = this.data.active-1 > -1 ? `nav_${this.data.active-1}` : 'nav_0';
      this.setData({
        scrollIntoViewId: prev
      })
      // wx.nextTick(() => {
      //   setTimeout(() => {
      //     this.setLine()
      //   }, 350)
      // })
      this.setLine()
    },
    setLine: function() {
      const query = this.createSelectorQuery()
      const prev = this.data.active-1 > -1 ? `nav_${this.data.active-1}` : '';
      query.select('.active').boundingClientRect()
      query.select(`#${prev}`).boundingClientRect()
      query.select('#nav-scroll').fields({
        scrollOffset: true,
        size: true
      })
      query.exec((res) => {
        console.log(res);
        this.setData({
          lineObj: {
            width: res[0].width,
            // left: res[0].left - 20 + this.scrollLeft
            left: res[0].left - 20 + res[2].scrollLeft
          }
        })
      })
    },
    changeActive: function(e) {
      const index = e.currentTarget.dataset.index || 0;
      if (index === this.data.active) {
        return false;
      }
      this.triggerEvent('change', index);
    }
  },
  observers: {
    active() {
      this.setScrollView()
      // wx.nextTick(() => {
      //   setTimeout(() => {
      //     this.setLine()
      //   }, 100)
      //   // this.onScrollToView()
      // })
      
    }
  }
})
